<template>
<div class="container">
    <div class="page-head">
        <div class="left">
            <el-form :inline="true" :model="query" @submit.native.prevent>
                <el-form-item>
                    <el-button type="primary" @click="showUploadView"><i class="el-icon-plus" style="margin-right: 5px"></i>上传数据</el-button>
                </el-form-item>

                <el-form-item>
                    <el-input v-model="query.keyword" placeholder="文件名称" clearable></el-input>
                </el-form-item>
                <el-button type="primary" native-type="submit" @click="getTableData">搜索</el-button>
                <el-button type="warning" @click="resetQuery">重置</el-button>
            </el-form>
        </div>
    </div>

    <el-table ref="tableView" class="page-body" :data="tableData" height="tableHeight" border>
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="ID" prop="id" width="100" align="center"></el-table-column>
        <el-table-column label="文件名称" prop="file_name" align="center"></el-table-column>
        <el-table-column label="总数" prop="totals" align="center"></el-table-column>
        <el-table-column label="已完成数量" prop="complate" align="center"></el-table-column>
        <el-table-column label="失败数据量" prop="failed" align="center"></el-table-column>
        <el-table-column label="分配状态" prop="is_assign" align="center">
            <template slot-scope="scope">
                {{scope.row.is_assign ? "已分配" : "未分配"}}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
            <template slot-scope="scope">
                <el-button type="primary" @click="handleAssign(scope.row.id)">分配</el-button>
                <el-button type="danger" @click="confirmDelete(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="page-foot">
        <div class="left"></div>
        <div class="right">
            <common-pagination :total="pg.total" :page.sync="pg.page" :limit.sync="pg.limit" @getList="getTableData"></common-pagination>
        </div>
    </div>

    <task-upload ref="uploadViewRef" @success="getTableData"></task-upload>
</div>
</template>

<script>
import pagination from "@/components/mixins/pagination.vue";
import pickerView from "@/components/picker/index.vue";
import TaskUpload from "./components/TaskUpload.vue";

// 设备相关api
import {
    getUploadListApi,
    handleAssignApi,
    deleteUploadApi
} from "@/api/task/task";


export default {
    components: {
        pickerView,
        TaskUpload
    },
    mixins: [pagination],
    data() {
        return {
            query: {
                keyword: ""
            },
            tableData: []
        }
    },
    created() {
        this.getTableData();
    },
    methods: {
        getTableData() {
            let params = Object.assign({}, this.query);
            params["pagination"] = this.pg;
            getUploadListApi(params).then(res => {
                this.tableData = res.data.list;
                this.setPg(res);
            });
        },
        doSearch() {
            this.resetPg();
            this.getTableData();
        },
        resetQuery() {
            this.query = {
                keyword: ""
            };
            this.getTableData();
        },
        
        showUploadView() {
            // 显示创建页面
            this.$refs.uploadViewRef.showView()
        },
        handleAssign(id) {
            handleAssignApi({
                id: id
            }).then((res) => {
                if (res.code !== 200) {
                    this.$message.error(res.msg);
                } else {
                    this.$message.success(res.msg);
                    this.getTableData();
                }
            });
        },
        confirmDelete(id) {
            this.$confirm(`确认删除该设备吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteUploadApi({
                    id: id
                }).then(() => {
                    this.getTableData();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                });         
                
            }).catch((e) => {
                console.log(e)
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
}
</script>

<style>

</style>
